import React, { Component } from 'react';
import { index_banner } from '../utils/api'
import './BannerImg.scss'
import { Carousel } from 'antd';
class BannerImg extends Component {
    constructor(props){
        super(props);
        this.state={
            bannerList:[]
        }
    }
    componentDidMount(){
        index_banner().then((res)=>{
            // console.log(res.data);
            // this.bannerList = res.data.list
            // console.log(this.bannerList);
            this.setState({
                bannerList:res.data.list
            })

        })
    }
    
    render() {
        const contentStyle = {
            height: '160px',
            color: '#fff',
            lineHeight: '160px',
            textAlign: 'center',
            background: '#364d79',
          };
        return (
            <Carousel effect="fade" autoplay>
            
           {
           this.state.bannerList.map((item,index)=>{
            return(
            <div key={index} className ='img' >
              {/* <h3 style={contentStyle}>{item.pic}</h3> */}
              
               <img src={item.pic} alt="" style={contentStyle}/>
            </div>
            )
           }) 
           
            }
           
           
          </Carousel>
        );
    }
}

export default BannerImg;